// pages/recommend/recommend.js
const app = getApp();
import utils from "../../utils/util";
Page({

  /**
   * 页面的初始数据
   */
  data: {// TAG DATA TOP
    // TAG DATA MAP ，地图的初始数据。
    map_class: 'map',
    latitude: 23.140152, //初始经纬度为越秀公园
    longitude: 113.265621,
    markers: [],
    Markers_SPOT: [],
    isMapFold: false,//控制地图大小

    // TAG DATA INPUT ，输入框相关数据
    clear:false, // 控制清空按钮
    searchData:'', // 输入框的值

    //TAG DATA SPOT ，景点相关信息
    StoreList:[], // 存储搜索列表，搜索框中有值得时候，显示这个List
    SpotList:[], // 存储景点列表, 输入框没有值得时候，显示这个List

    //TAG DATA SPOTLIST ,景点列表
    currentBtn_SPOTLIST: -1,
  },

  /**================================
   * TAG LISTEN MAP ，地图操作相关函数
   */
  markertap(e){

  },
  regionchange(e){

  },
  mapAnimationEnd(e){

  },

// 地图绘制, 
 drawSpotMarker(){
  console.log("[MAP] -- 绘制地图Marker")
  let spot_marker_arr = [];
  for(let i=0;i<this.data.SpotList.length;i++){
    let item = this.data.SpotList[i];
    let marker = {
      id: item.id, // 使用景点信息的id作为id
      iconPath: "../../images/Spot.png",
      longitude: Number(item.longitude),
      latitude: Number(item.latitude),
      width: 20,
      height: 20,
      zIndex:1,
      customCallout:{
        anchorX: 0,
        anchorY: 0,
        display: "ALWAYS"
      }
    }

    spot_marker_arr.push(marker);
  }
  this.setData({
    Markers_SPOT: spot_marker_arr
  });
  this.refreshMarker();


 },

 //刷新地图上的Marker
 refreshMarker(){
   console.log("[MAP] -- refreshMarker")
  let spotMarker = this.data.Markers_SPOT;
  this.setData({
    markers: spotMarker
  })
 },

  /**=================================
   * 底部输入框相关函数 TAG LISTEN INPUT
   * @param {*} e 
   */
  //控制输入框上下移动的函数
  changeMap(e){
    if(this.data.isMapFold == false){
      this.setData({//执行下方的搜索框展开
        isMapFold: true, 
        map_class: 'map_fold',
      });
    }else{
      this.setData({//执行关闭
        isMapFold:false,
        map_class: 'map_expand'
      })
    }
  },
  //输入框确认时触发的函数
  goSearch(e){

  },
  //输入框的值变动时触发的
  searchInput(e){
    if(e.detail.value == ''){
      this.clearInput();
    }else{
      console.log("[INFO] -- 输入框值：",e.detail.value);
      this.setData({
        searchData:e.detail.value,//设置好值
        clear:true//显示隐藏按钮
      });

      //发送搜索请求。。。，这个要做防抖吗?
      this.searchSpot(this, e.detail.value);
    }
  },
  //清空
  clearInput(e){
    this.setData({
      searchData:'',
      clear:false,
      StoreList:[],//清空搜索结果
    });
  },


  /**
   * TAG LISTEN SPOTLIST ，景点列表的相关监听函数
   */
  SpotListTap(e){
    if(e.currentTarget.dataset.index == this.data.currentBtn_SPOTLIST){
      this.setData({
        currentBtn_SPOTLIST:-1,
      });
    }else{
      this.setData({
        currentBtn_SPOTLIST: e.currentTarget.dataset.index,
        latitude:e.currentTarget.dataset.item.latitude,//将地图移动到用户点击的景点
        longitude:e.currentTarget.dataset.item.longitude
      });
      

    }
  },

//控制页面跳转到详情页面
  toDetail(e){
    wx.navigateTo({
      url: '/pages/details/details?id='+e.currentTarget.dataset.item.id,
    });
  },
  /**========================
   * 生命周期函数--监听页面加载， 页面加载时直接将所有的景点信息加载到SpotList中去
   */
  onLoad: function (options) {
      //1. 发送请求，加载数据，成功后将数据保存起来
      this.getAllSpot().then((res)=>{
        this.setData({
          SpotList: res.data
        });

        //2. 将数据制作为Marker，绘制在地图上面
      this.drawSpotMarker();

      });
      

  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  },
  /**
   * TAG REQUEST 
   */
  //获取所有的景点信息
  getAllSpot(){
    return new Promise((resolve,reject)=>{
      wx.request({
        url: app.globalData.headurl+"getAllRecommend",
        method:'GET',
        dataType:'json',
        success:function(res){
          console.log("[REQUEST] -- 景点信息:",res);
          resolve(res.data);
        },
        fail:function(res){
          reject(res);
        }
      });
    })
  },

  //模糊搜索，并且带个防抖
  searchSpot: utils.debounce((context,keyword)=>{
    wx.request({
      url: app.globalData.headurl + "getRecommendByName",
      method: 'GET',
      data: {
        name: keyword
      },
      success: (res)=>{
        console.log("[REQUEST] -- 景点搜索结果",res);
        context.setData({
          StoreList : res.data.data
        });
      }
    })
  },0,false),
})